<template>
    <div class="pe-avatar" :style="{width: getSize(), height: getSize(), borderRadius: shape === 'circle' ? `calc(${getSize()} / 2)` : 'var(--pe-border-radius)'}">
        <div v-if="!src && icon" class="pe-avatar-icon-box" :style="{fontSize: typeof icon === 'string' ? '14px' : 'var(--pe-avatar-size)'}">
            <template v-if="typeof icon === 'string'">
                {{ icon }}
            </template>
            <template v-else>
                <icon />
            </template>
        </div>
        <div v-if="src" class="pe-avatar-img-box">
            <img class="pe-avatar-img" :style="{objectFit: fit}" :src="src" :alt="alt" :srcSet="srcSet">
        </div>
    </div>
</template>

<script setup lang="ts">
import { Component } from "vue"

/**
 * @param icon 设置 Avatar 的图标类型，具体参考 Icon 组件
 * @param size Avatar 大小
 * @param shape Avatar 形状
 * @param src Avatar 图片的源地址
 * @param src-set 图片 Avatar 的原生 srcset 属性
 * @param alt 图片 Avatar 的原生 alt 属性
 * @param fit 当展示类型为图片的时候，设置图片如何适应容器
 */
interface Props {
    icon?: Component | string,
    size?: 'small' | 'default' | 'large' | number,
    shape?: 'circle' | 'square',
    src?: string,
    srcSet?: string,
    alt?: string,
    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
}

const props = withDefaults(defineProps<Props>(), {
    size: 'default',
    shape: 'circle',
    fit: 'cover'
})

const getSize = () => {
    if(typeof props.size === 'number') {
        return props.size + "px"
    } else {
        if(props.size === 'small') {
            return "var(--pe-small-height)"
        } else if(props.size === 'large') {
            return "var(--pe-large-height)"
        } else {
            return "var(--pe-default-height)"
        }
    }
}
</script>

<script lang="ts">
export default {
    name: "pe-avatar"
}
</script>
